<!--
  - @copyright Copyright (c) 2019 Joas Schilling <coding@schilljs.com>
  -
  - @author Joas Schilling <coding@schilljs.com>
  -
  - @license GNU AGPL version 3 or any later version
  -
  - This program is free software: you can redistribute it and/or modify
  - it under the terms of the GNU Affero General Public License as
  - published by the Free Software Foundation, either version 3 of the
  - License, or (at your option) any later version.
  -
  - This program is distributed in the hope that it will be useful,
  - but WITHOUT ANY WARRANTY; without even the implied warranty of
  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  - GNU Affero General Public License for more details.
  -
  - You should have received a copy of the GNU Affero General Public License
  - along with this program. If not, see <http://www.gnu.org/licenses/>.
-->

<template>
	<div>
		<ul>
			<Participant
				v-for="item in items"
				:key="generateKey(item)"
				:participant="item"
				:is-selectable="participantsSelectable"
				@clickParticipant="handleClickParticipant" />
		</ul>
		<template v-if="loading">
			<LoadingParticipant
				v-for="n in dummyParticipants"
				:key="n" />
		</template>
	</div>
</template>

<script>

import Participant from './Participant/Participant'
import LoadingParticipant from './Participant/LoadingParticipant'

export default {
	name: 'ParticipantsList',

	components: {
		Participant,
		LoadingParticipant,
	},

	props: {
		/**
		 * List of searched users or groups
		 */
		items: {
			type: Array,
			required: true,
		},
		loading: {
			type: Boolean,
			default: false,
		},
	},

	computed: {
		token() {
			return this.$store.getters.getToken()
		},

		dummyParticipants() {
			const dummies = 6 - this.items.length
			return dummies > 0 ? dummies : 0
		},
		// If the parent component is "ParticipantsSearchResults", make the children
		// participant components selectable
		participantsSelectable() {
			return this.$parent.$options.name === 'ParticipantsSearchResults'
		},
	},

	methods: {
		async handleClickParticipant(participant) {
			this.$emit('click', participant)
		},

		generateKey(participant) {
			let key = 'i#' + participant.id
			if (participant.userId) {
				key = 'u#' + participant.userId
			} else if (participant.sessionId) {
				key = 's#' + participant.sessionId
			}
			return key
		},
	},
}
</script>
